<template>
    <view class="container">
        <view class="detail-card">
            <view class="detail-item">
                <text class="label">服务名称：</text>
                <text class="value">{{ orderData.serviceName }}</text>
            </view>
            <view class="detail-item">
                <text class="label">服务日期：</text>
                <text class="value">{{ orderData.startDate }} 至 {{ orderData.endDate }}</text>
            </view>
            <view class="detail-item">
                <text class="label">每日时段：</text>
                <text class="value">{{ orderData.startTime }} - {{ orderData.endTime }}</text>
            </view>
            <view class="detail-item">
                <text class="label">当前状态：</text>
                <uni-tag :text="statusMap[orderData.status]" :type="statusTypeMap[orderData.status]" />
            </view>
            <!-- <view v-if="orderData.status === 'SETTLED'" class="evaluation-section">
                <view class="detail-item">
                    <text class="label">守时评分：</text>
                    <text class="value">{{ orderData.punctualityRating || '暂无' }}</text>
                </view>
                <view class="detail-item">
                    <text class="label">服务态度：</text>
                    <text class="value">{{ orderData.attitudeRating || '暂无' }}</text>
                </view>
            </view> -->
        </view>
        
        <!-- 新增扫码签到按钮 -->
        <view v-if="orderData.status === 'PENDING_CONFIRM'" class="sign-button" @click="handleScan">
          <text>扫码签到</text>
        </view>
    </view>
</template>
    
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { assignmentsign } from '@/api/system/login'

const orderData = ref({})
const statusMap = {
    'PENDING_CONFIRM': '待确认',
    'IN_SERVICE': '服务中',
    'SETTLED': '已完成'
}
const statusTypeMap = {
    'PENDING_CONFIRM': 'warning',
    'IN_SERVICE': 'primary',
    'SETTLED': 'success'
}

onLoad((options) => {
    if (options.data) {
        orderData.value = JSON.parse(decodeURIComponent(options.data))       
         console.log('[DEBUG] 接收到的订单数据:', orderData.value)
        console.log("orderId:", orderData.value.orderId)
        console.log("status:", orderData.value.status)
        console.log("状态文本:", statusMap[orderData.value.status])
        console.log("startDate:", orderData.value.startDate)
        console.log("endDate:", orderData.value.endDate)
        console.log("startTime:", orderData.value.startTime)
        console.log("endTime:", orderData.value.endTime)
    } else {
        console.error('未接收到 orderData')
    }
})

const handleScan = () => {
  uni.scanCode({
    scanType: ['qrCode'], // 指定只识别二维码
    // onlyFromCamera: false, // 允许从相册选择
    success: (res) => {      console.log('扫码结果:', res)
      const scanResultNumber = Number(res.result)
      if (scanResultNumber === orderData.value.orderId) {
        assignmentsign({ orderId: orderData.value.orderId })
          .then(() => {
           
            uni.showToast({ title: '签到成功', icon: 'success' })
            orderData.value.status = 'IN_SERVICE'
          })
          .catch(err => {
            console.error('签到失败:', err)
            uni.showToast({ title: '签到失败', icon: 'none' })
          })
      } else {
        uni.showToast({ title: '二维码不匹配', icon: 'none' })
      }
    },
    fail: (err) => {
      console.error('扫码失败:', err)
      uni.showToast({ title: '扫码取消或失败', icon: 'none' })
    }
  })
}
</script>

<style scoped>
/* 复用客户端的样式，根据需要调整 */
.container { padding: 20rpx; }
.detail-card { background: white; border-radius: 12rpx; padding: 24rpx; }
.detail-item { display: flex; margin-bottom: 20rpx; }
.label { width: 160rpx; color: #666; }
.value { flex: 1; color: #333; }
.evaluation-section { margin-top: 30rpx; border-top: 1rpx solid #eee; padding-top: 20rpx; }

/* 新增按钮样式 */
.sign-button {
  margin: 40rpx;
  padding: 20rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 8rpx;
  text-align: center;
}
</style>